  //模拟数据库
  let user = [{ id: 1, consultation: "专业视角", sort: "1", subclass: "4",},
  { id: 2, consultation: "专业视角", sort: " 2", subclass: "2",  },
  { id: 3, consultation: "专业视角", sort: "3", subclass: "4", },
  { id: 4, consultation: "专业视角", sort: " 4", subclass: "2",  },
  { id: 5, consultation: "成功助力", sort: "5", subclass: "4", },
  { id: 6, consultation: "活动聚焦", sort: "6", subclass: "2", },
  { id: 7, consultation: "研究报告", sort: "7", subclass: "4", },
  { id: 8, consultation: "企业风采", sort: "8", subclass: "2", },
  { id: 9, consultation: "科创课题", sort: "9", subclass: "4", },
  { id: 10, consultation: "活动聚焦", sort: "10", subclass: "2", },
  ];



  //声明区域
  window.onload = function () {
    displayData();   //显示事件
    addBtn3Event();  //添加删除事件
    ad();
    getDate();
  }

  //判断是否加载
function ad() {
  if (getDate().length == 0) {
    saveDate(user);
  }
}
//存储到浏览器函数
function saveDate(data) {
  sessionStorage.setItem("user", JSON.stringify(data));
}
//浏览器里获取函数
function getDate() {
  let data = sessionStorage.getItem("user");
  if (data !== null) {
    return JSON.parse(data);
  } else {
    return [];
  }
}
    function displayData() {
        $("#tbCard").html("")
        //文档碎片
        let fragment1 = document.createDocumentFragment();
        for (let i = 0; i < 5; i++) {
          let tr = document.createElement("tr");
          tr.innerHTML = `
          <td>${user[i].id}</td>
          <td>${user[i].consultation}</td>
          <td>${user[i].sort}</td>
          <td>${user[i].subclass}</td>
          <td>
            <button class="btn1">添加子类</button>
            <button class="btn2" id="xiugai" data-index='${user[i].id}'>编辑</button>
            <button class="btn3" data-index='${user[i].id}'>删除</button>
          </td>`;
    
          fragment1.appendChild(tr);
        }
        $("#tbCard").append(fragment1);
      }

      function onlouad(n,a) { //分页调用函数
        $("#tbCard").html("")
        //文档碎片
        let fragment1 = document.createDocumentFragment();
        for (let i = n; i < a; i++) {
          let tr = document.createElement("tr");
          tr.innerHTML = `
          <td>${user[i].id}</td>
          <td>${user[i].consultation}</td>
          <td>${user[i].sort}</td>
          <td>${user[i].subclass}</td>
          <td>
            <button class="btn1">添加子类</button>
            <button class="btn2" id="xiugai" data-index='${user[i].id}'>编辑</button>
            <button class="btn3" data-index='${user[i].id}'>删除</button>
          </td>`;
    
          fragment1.appendChild(tr);
        }
        $("#tbCard").append(fragment1);
      }
      //添加删除事件
  function addBtn3Event() {
    $("#tbCard").on("click", ".btn3", function (e) {
      let id = $(e.target).attr("data-index");
      Btn3UserDatadById(id);
      displayData();
    })
  }
  function Btn3UserDatadById(id) {
    for (let i = 0; i < user.length; i++) {
      if (user[i].id == id) {
        user.splice(i, 1);
        break;
      }
    }
  }


  //添加
  //获取新增标签对象
  let btnCardtianjia = document.getElementById('btnCardtianjia');
  let AmiddleBox = document.getElementById('middleBox');
  let consultation=document.getElementById('consultation');
  let sort=document.getElementById('sort');
  let subclass=document.getElementById('subclass');
  //获取两个按钮
  let Smtianjia = document.getElementById('somlltianjia');
  let Smllcell = document.getElementById("somllcell");

  // 新增
  btnCardtianjia.onclick = function () {
    AmiddleBox.style.display = 'block'
  }

  somlltianjia.onclick=function(){
    consultationinput=consultation.value;
    sortinput=sort.value;
    subclassinput=subclass.value;
    user.push({
        id:'', consultation: consultationinput, sort: sortinput,
        subclass: subclassinput, 
      });
      displayData();
      AmiddleBox.style.display='none';
  }
  Smllcell.onclick=function(){
    AmiddleBox.style.display = 'none'
  }

  //分页
  paging();
  function paging() {
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let serialNumber = user.length;//序号
    onlouad(0, 5)//初始页面信息，第一页
    $("#inputPage").val(page);//页码
   

    // 下一页
    $("#nextpage").click(function () {
      if (no + 5 < serialNumber) {//如果no+5小于数据条数
        no += 5;
        page++;
        $("#inputPage").val(page);
        if (serialNumber >= (no + 5)) {
          onlouad(no, no + 5);
        } else (
          onlouad(no, serialNumber)

        )
      }

    });

    // 上一页
    $("#lastpage").click(function () {
      if (no - 5 >= 0) {
        no -= 5;
        page--;
        $("#inputPage").val(page);
        onlouad(no, no + 5);
      }
    });
  }

//   //修改
//   //获取修改标签对象
//   // let btn2 = document.getElementsByClassName('btn2');
//   // let middleChasi = document.getElementById('middleChasi');
//   // let middlChassn = document.getElementById("middlChassn").value;
//   // let middlChasn = document.getElementById("middlChasn").value;
//   // let middlChasac = document.getElementById("middlChasac").value;
//   // let middlChasm = document.getElementById("middlChasm").value;
  //获取两个按钮
   let middlBaocun = document.querySelector('.middlBaocun');
   let middlCancel = document.querySelector(".middlCancel");

//   // //打开修改界面
//   // $("tbody").on("click", ".btn2", function () { //点击查看按钮触发的动作
//   //   $("#middleChasi").show();
//   // });
 

//   // middlBaocun.onclick = function () {
//   //   user.splice({
  
//   //   });
//   //   displayData();
//   // }
//   // middlBaocun.onclick = function () {
//   //   middleChasi.style.display = 'none';
//   // }
  
//   // middlCancel.onclick = function () {
//   //   middleChasi.style.display = 'none';
//   // }
//修改
$("#tbCard").on("click", "#xiugai", function () {
  let middleChasi=document.getElementById('middleChasi');
  middleChasi.style.display = 'block';
  let id = $(this).attr("data-index");
  $(".middlBaocun").click(function () {
    middleChasi.style.display = 'none';
    let consultation = $("#middleChasi").val();
    let zhanghao = $("#chasm").val();
    let phone = $("#chasac").val();
    let zhiwei = $("#chasn").val();
    let beizhu = $("#chasg").val();
    let data = getDate();
    console.log(data);
    for (let i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data[i].name = name;
        data[i].zhanghao = zhanghao;
        data[i].phone = phone;
        data[i].zhiwei = zhiwei;
        data[i].beizhu = beizhu;
        data[i].consultation = consultation;
      }
      saveDate(data);
      displayData();
    }
  });
});
let middleChasi=document.getElementById('middleChasi');
//数据修改的模态框隐藏
$("#middleChasi").on("click", ".middlCancel", function () {
  middleChasi.style.display = 'none';
});




  //查询
  function choice(obj) {
    console.log("obj",obj.value)
    let i = $(obj).val();
    if (i == 2) {
    //   let user = JSON.parse(sessionStorage.getItem("user"));
    //   console.log(user);
    //   console.log("进入2");
    //   showChoice(user);
    //   function showChoice(data) {
    //     $("#tbCard")[0].innerHTML = "";
    //     for (let i = 0; i < user.length; i++) {
    //       if (`${user[i].subclass}` == "2") {
    //         $(`#tbCard`)[0].innerHTML += `<tr>
    //         <td>${data[i].id}</td>
    //       <td>${data[i].consultation}</td>
    //       <td>${data[i].sort}</td>
    //       <td>${data[i].subclass}</td>
    //       <td>
    //         <button class="btn1">添加子类</button>
    //         <button class="btn2" id="xiugai" data-index='${data[i].id}'>编辑</button>
    //         <button class="btn3" data-index='${usedatar[i].id}'>删除</button>
    //       </td>
  
    //   </tr>
    //         `;
    //       }
    //     }
    //   }
     } else if (i == 3) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      console.log(user);
      console.log("进入4");
      showChoice(user);
      function showChoice(data) {
        $("#tbCard")[0].innerHTML = "";
        for (let i = 0; i < user.length; i++) {
          if (`${user[i].subclass}` == "4") {
            $(`#tbCard`)[0].innerHTML += `<tr>
            <td>${data[i].id}</td>
          <td>${data[i].consultation}</td>
          <td>${data[i].sort}</td>
          <td>${data[i].subclass}</td>
          <td>
            <button class="btn1">添加子类</button>
            <button class="btn2" id="xiugai" data-index='${data[i].id}'>编辑</button>
            <button class="btn3" data-index='${user[i].id}'>删除</button>
          </td>
  
        </tr>
            `;
          }
        }
      }
    }  else if (i == 1) {
      let messages = JSON.parse(sessionStorage.getItem("user"));
      console.log(messages);
      console.log("进入全部");
      showChoice(messages);
      function showChoice(data) {
        $("#tbCard")[0].innerHTML = "";
        for (let i = 0; i < messages.length; i++) {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td>${data[i].id}</td>
          <td>${data[i].consultation}</td>
          <td>${data[i].sort}</td>
          <td>${data[i].subclass}</td>
          <td>
            <button class="btn1">添加子类</button>
            <button class="btn2" id="xiugai" data-index='${data[i].id}'>编辑</button>
            <button class="btn3" data-index='${data[i].id}'>删除</button>
          </td>
  
      </tr>
            `;
        }
      }
    }
  }